<template>
  <div class="headline">
    <p class="info">完善信息</p>
    <p class="describe">请准确填写孩子信息，有助于课程的精准匹配</p>
  </div>
  <div class="profile">
    <div class="boy" @click="change(0)">
      <img :src="require('@/assets/img/boy.webp')" alt="" class="B" />
      <div class="a1" v-if="action === 0">
        <img :src="require('@/assets/img/tuoyuan.webp')" alt="" class="B-ellipse" />
        <img :src="require('@/assets/img/xuanzhong.webp')" alt="" class="B-pitch" />
      </div>
    </div>
    <div class="girl" @click="change(1)">
      <img :src="require('@/assets/img/girl.webp')" alt="" class="G" />
      <div class="a2" v-if="action === 1">
        <img :src="require('@/assets/img/tuoyuan.webp')" alt="" class="G-ellipse" />
        <img :src="require('@/assets/img/xuanzhong.webp')" alt="" class="G-pitch" />
      </div>
    </div>
  </div>
  <div class="name">
    <div class="smart" @click="change1">智能取名</div>
    <van-cell-group border="false">
      <van-field v-model="name" placeholder="宝贝英文名" />
    </van-cell-group>
  </div>
  <div class="birthday">
    <van-cell-group border="false">
      <van-field v-model="birthday" placeholder="宝贝生日" />
    </van-cell-group>
  </div>
  <div class="open" @click="change2">开启学习之旅</div>
</template>

<script>
import { getwanshan } from "../utils/api";

export default {
  data() {
    return {
      name: "",
      birthday: "",
      action: 0,
      perfect: "",
      reg: /^[0-9]{8}$/
    };
  },

  components: {},

  computed: {},

  mounted() {},

  methods: {
    change(index) {
      this.action = index;
    },
    change2() {
      if (this.reg.test(this.birthday)) {
        console.log("正确");
        this.$router.push("/home/index");
      } else {
        console.log("错误");
      }
    },
    async getCerfect() {
      const res = await getwanshan();
      this.name = res.name;
      console.log(res);
    },
    change1() {
      this.getCerfect();
    }
  }
};
</script>
<style lang="scss" scoped>
.headline {
  width: 100%;
  height: 100px;
  line-height: 5px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  font-weight: 600;

  .info {
    font-size: 18px;
  }
  .describe {
    font-size: 10px;
  }
}
.profile {
  width: 100%;
  height: 120px;
  position: relative;
}
.B-ellipse {
  width: 75px;
  height: 75px;
  position: absolute;
  top: -4px;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
.B-pitch {
  width: 30px;
  height: 30px;
  position: absolute;
  top: 52px;
  left: 45px;
  right: 0;
  bottom: 0;
  margin: auto;
}
.G-ellipse {
  width: 75px;
  height: 75px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
.G-pitch {
  width: 30px;
  height: 30px;
  position: absolute;
  top: 52px;
  left: 45px;
  right: 0;
  bottom: 0;
  margin: auto;
}
.boy {
  width: 75px;
  height: 75px;
  position: absolute;
  top: -85px;
  left: 0;
  right: 170px;
  bottom: -84px;
  margin: auto;
  .B {
    width: 100%;
    height: 100%;
  }
}
.girl {
  width: 75px;
  height: 75px;
  position: absolute;
  top: -85px;
  left: 165px;
  right: 0;
  bottom: -84px;
  margin: auto;
  .G {
    width: 100%;
    height: 100%;
  }
}
.name {
  width: 260px;
  height: 45px;
  font-size: 15px;
  color: #ffffff;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  // background-color: #dfdfdf;
  border: solid #dfdfdf;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 155px;
  margin: auto;
  border-radius: 1.3333em;
  .smart {
    width: 60px;
    height: 35px;
    font-size: 13px;
    font-weight: 700;
    color: #3b98ff;
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #dfdfdf;
    position: absolute;
    left: 185px;
    border-radius: 1.02667rem;
  }
}
.birthday {
  width: 260px;
  height: 45px;
  font-size: 15px;
  color: #ffffff;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  // background-color: #dfdfdf;
  border: solid #dfdfdf;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  border-radius: 1.3333em;
}
.open {
  width: 260px;
  height: 45px;
  font-size: 15px;
  color: #ffffff;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #0f95eb;
  position: absolute;
  top: 150px;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  border-radius: 1.3333em;
}
</style>
